<template>
	<my-table :columns="columns" :data="tableData" @row-click="({row})=>handleClick(row)">
		<template #caozuo="{row}">
			<u-icon name="play-circle-fill" color="#2979ff" class="m-center" />
		</template>
	</my-table>
</template>

<script setup>
	const props = defineProps({
		list: {
			type: Array,
			required: true,
			default: () => []
		},
	})

	/*******************************************摄像头列表***************************************/
	import {
		getApiFabric,
	} from "@/api/customApi";

	const columns = [{
			prop: '监控名称',
			label: '监控名称',
			width: 110
		}, {
			prop: '监控区域',
			label: '监控区域',
			width: 110
		}, {
			prop: '监控状态',
			label: '状态',
			width: 50
		}, {
			prop: 'caozuo',
			label: '播放',
			width: 50
		}],
		tableData = ref([]),
		emits = defineEmits(['DataQuery'])

	function fn() {
		getApiFabric({
			apiCode: "72adb4c1-38e8-4ca4-bc48-1bf517d1a54f",
			propertyMapping: {
				indexCode: "indexCode",
				监控区域: "regionName",
				监控名称: "cn",
				监控状态: "online",
			},
			params: [{
				code: "regionName",
				value: '',
			}, {
				code: "search",
				value: ''
			}]
		}).then((res) => {
			tableData.value = res.data.filter(item => props.list.includes(item.indexCode))
			emits('DataQuery', tableData.value)
		})
	}
	fn()

	function handleClick(row) {
		// 跳转播放页面
		uni.navigateTo({
			url: `/pages/application/xxjc/spjk/playVideo?cameraIndexCode=${row.indexCode}&cameraName=${row.监控名称}`
		})
	}
</script>

<style scoped lang="scss">
	.video {
		width: 100%;
		height: 240rpx;
		position: relative;

		&-title {
			font-size: 20rpx;
			padding: 0 10rpx;
			background-color: rgba(0, 0, 0, 0.8);
			color: #fff;
			width: 100%;
			box-sizing: border-box;
		}
	}
</style>